<!-- mySearchBar.vue -->
<template>
  <div class="search-bar">
    <el-input
      v-model="internalKeyword"
      :placeholder="$t('domainlist.searchPlaceholder')"
      clearable
      show-word-limit
      maxlength="50"
      class="search-input"
      @clear="onClearSearch"
      @keyup.enter.native="onSearch"
    />
    <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t('domainlist.search') }}</el-button>
    <el-button type="success" icon="el-icon-plus" @click="$emit('add-site')">{{ $t('domainlist.addSite') }}</el-button>
    <el-button type="success" icon="el-icon-plus" @click="$emit('batch-push')">{{ $t('domainlist.batchPush')
    }}</el-button>
    <el-button v-if="isAdmin" type="warning" icon="el-icon-setting" @click="$emit('add-default')">
      {{ $t('domainlist.addDefaultConfig') }}
    </el-button>
    <el-button type="danger" icon="el-icon-remove" @click="$emit('batch-remove')">{{ $t('domainlist.batchRemove')
    }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'MySearchBar',
  props: {
    keyword: String,
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      internalKeyword: this.keyword
    }
  },
  watch: {
    keyword(newVal) {
      this.internalKeyword = newVal
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.internalKeyword)
    },
    onClearSearch() {
      this.internalKeyword = ''
      this.$emit('clear-search')
    }
  }
}
</script>

<style>
.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1400px;
  width: 100%;
}

.search-input {
  min-width: 300px;
  flex-grow: 1;
  max-width: 600px;
}

.el-button {
  min-width: 3%vh;
  white-space: nowrap;
}

.el-button-group {
  display: flex;
  flex-direction: row;
}
</style>
